<template>
	<div class="explore">
		<div class="top flex-b-c">
			<p><span>SQ</span>.web3</p>
			<div class="flex-e-c">
				<div class="money" @click="linkToProfile">0.01 ETH</div>
				<div class="head" @click="linkToAccount">
					<img src="/images/9.jpg" alt="" />
				</div>
			</div>
		</div>

		<div class="table flex-b-c">
			<div class="table-left flex-s-c">
				<p :class="active === 1 ? 'active' : ''" @click="handleChange(1)">Trending</p>
				<p :class="active === 2 ? 'active' : ''" @click="handleChange(2)">Ranking</p>
				<p :class="active === 3 ? 'active' : ''" @click="handleChange(3)">New Joiners</p>
			</div>
			<el-icon size="24" color="#999999">
				<Refresh />
			</el-icon>
		</div>

		<div :class="{ search: active === 2, hide: active !== 2 }">
			<div class="table-left flex-s-c">
				<p :class="typeActive === 1 ? 'active' : ''" @click="handleTypeChange(1)">Present Received</p>
				<p :class="typeActive === 2 ? 'active' : ''" @click="handleTypeChange(2)">Order Volume</p>
				<p :class="typeActive === 3 ? 'active' : ''" @click="handleTypeChange(3)">Order Count</p>
				<p :class="typeActive === 4 ? 'active' : ''" @click="handleTypeChange(4)">Popular</p>
			</div>
			<div class="table-left flex-s-c">
				<p :class="timeActive === 1 ? 'active' : ''" @click="handleTimeChange(1)">Day</p>
				<p :class="timeActive === 2 ? 'active' : ''" @click="handleTimeChange(2)">Week</p>
				<p :class="timeActive === 3 ? 'active' : ''" @click="handleTimeChange(3)">Month</p>
				<p :class="timeActive === 4 ? 'active' : ''" @click="handleTimeChange(4)">All Time</p>
			</div>
		</div>

		<div class="table-content" v-if="active === 1">
			<div v-for="item in jsonData.transactions" :key="item.timestamp" class="item">
				<div class="item-right flex-s-c">
					<div class="avatar" @click="linkToSidekick({ image: item.subject_avatar, name: item.user_name })">
						<img :src="item.subject_avatar" alt="" />
					</div>
					<div class="item-right">
						<p>{{ item.user_name }} {{ item.direction }} {{ item.amount }} {{ item.subject_name }} Keys</p>
						<p>
							<span>{{ item.price_eth }}</span> Eth, {{ formatTimestamp(item.timestamp) }}
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="table-content" v-if="active === 2">
			<div v-for="item in sidekickerData.sidekickers" :key="item.sidekicker_key" class="item">
				<div class="item-right flex-s-c">
					<div class="avatar" @click="linkToSidekick({ image: item.subject_avatar, name: item.sidekicker_name })">
						<img :src="item.subject_avatar" alt="" />
					</div>
					<div>
						<p>{{ item.sidekicker_name }}</p>
						<p><span class="logged-in">●</span>Online</p>
					</div>
					<div class="item-right" style="margin-left: 40px">
						<p>
							Order Volume:
							<span :style="{ color: item.previous_values[0] > item.previous_values[1] ? 'black' : 'red' }">
								{{ item.order_volume_eth }}
							</span>
							<img v-if="item.previous_values[0] > item.previous_values[1]" src="/images/icon/up.svg" alt="Increase" />
							<img v-else src="/images/icon/down.svg" alt="Decrease" />
							Order Count:
							<span :style="{ color: item.previous_values[0] > item.previous_values[1] ? 'black' : 'red' }">
								{{ item.order_completed }}
							</span>
							<img v-if="item.previous_values[0] > item.previous_values[1]" src="/images/icon/up.svg" alt="Increase" />
							<img v-else src="/images/icon/down.svg" alt="Decrease" />
							Current Value:
							<span :style="{ color: item.previous_values[0] > item.previous_values[1] ? 'black' : 'red' }">
								{{ item.current_value }}
							</span>
							<img v-if="item.previous_values[0] > item.previous_values[1]" src="/images/icon/up.svg" alt="Increase" />
							<img v-else src="/images/icon/down.svg" alt="Decrease" />
						</p>
					</div>
					<div>
						<img src="/images/icon/trend.svg" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { Refresh } from "@element-plus/icons";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";

const router = useRouter();

const linkToProfile = () => {
	router.push("/profile");
};

const linkToSidekick = (data) => {
	localStorage.setItem("sidekickData", JSON.stringify(data));
	router.push("/sidekick-info");
};

const linkToAccount = () => {
	router.push("/account");
};

const active = ref(1);
const handleChange = (index) => {
	active.value = index;
};

const typeActive = ref(1);
const handleTypeChange = (index) => {
	typeActive.value = index;
	console.log(jsonData.value);
	// 乱序
	sidekickerData.value.sidekickers.sort(() => Math.random() - 0.5);
};

const timeActive = ref(1);
const handleTimeChange = (index) => {
	timeActive.value = index;
	// 乱序
	sidekickerData.value.sidekickers.sort(() => Math.random() - 0.5);
};

const jsonData = ref([]);
const sidekickerData = ref([]);

const fetchData = async () => {
	try {
		const response = await fetch("/fake-data/transactions.json");
		jsonData.value = await response.json();
	} catch (error) {
		console.error("Error fetching data:", error);
	}
};

const fetchSidekickerData = async () => {
	try {
		const response = await fetch("/fake-data/sidekicker.json");
		sidekickerData.value = await response.json();
	} catch (error) {
		console.error("Error fetching data:", error);
	}
};

onMounted(() => {
	fetchData();
	fetchSidekickerData();
	console.log(sidekickerData);
});

const formatTimestamp = (timestamp) => {
	const now = new Date();
	const time = new Date(timestamp);
	const diff = now.getTime() - time.getTime();

	const minutes = Math.floor(diff / 60000);

	if (minutes < 1) {
		return "Just now";
	} else if (minutes < 60) {
		return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
	} else {
		const hours = Math.floor(minutes / 60);
		if (hours < 24) {
			return `${hours} hour${hours > 1 ? "s" : ""} ago`;
		} else {
			const days = Math.floor(hours / 24);
			return `${days} day${days > 1 ? "s" : ""} ago`;
		}
	}
};
</script>

<style scoped lang="scss">
.explore {
	.hide {
		display: none;
	}

	.top {
		border-bottom: 1px solid #d3d3d3;
		padding-bottom: 40px;
		font-size: 24px;

		span {
			color: #00b9f4;
		}

		.money {
			height: 40px;
			font-size: 16px;
			color: #666666;
			padding: 0 14px;
			border-radius: 20px;
			border: 1px solid #d3d3d3;
			line-height: 40px;
		}

		.head {
			margin-left: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
		}
	}

	.table {
		margin-top: 50px;
		color: #666666;

		p {
			margin-right: 20px;
			cursor: pointer;
		}

		.active {
			color: #333333;
			font-weight: bold;
		}
	}

	.search {
		color: #666666;

		p {
			margin-right: 20px;
			cursor: pointer;
			color: #999999;
			font-size: 14px;
		}

		.active {
			color: #333333;
			font-weight: bold;
		}

		.table-left {
			margin-top: 10px;
		}
	}

	.table-content {
		margin-top: 30px;
		height: calc(100vh - 260px);
		overflow-y: auto;
		overflow-x: hidden;

		.item {
			margin-bottom: 20px;
		}

		.avatar {
			margin-right: 16px;

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background: #efefef;
			}
		}

		.item-right {
			margin-left: 10px;

			p {
				margin-right: 5px;
			}

			p:last-child {
				font-size: 14px;
				padding-top: 10px;
				color: #999999;

				span {
					color: #ddc0cf;
				}
			}

			p .logged-in {
				color: green !important;
			}
		}
	}
}
</style>
